<template>
    <div>
        <ComTitle title="页面设置"></ComTitle>
        <ComGroup title="页面名称" name-black content-block>
            <el-input v-model.lazy="name" placeholder="请输入页面名称"></el-input>
        </ComGroup>
        <ComGroup title="微信分享文案" name-black content-block>
            <el-input v-model.lazy="shareDesc" placeholder="用户通过微信分享给朋友时显示，最多28个汉字"></el-input>
        </ComGroup>
        <ComGroup title="微信分享卡片" tips="图片建议长宽比例5:4" name-black content-block>
            <el-button type="text" @click="shareImage = ''">重置</el-button>
            <UpLoadBox :imgUrl.sync="shareImage"></UpLoadBox>
        </ComGroup>
        <ComDivider></ComDivider>
        <ComGroup title="背景颜色" name-black content-block>
            <el-button type="text" @click="backgroundColor = ''">重置</el-button>
            <el-color-picker v-model="backgroundColor"></el-color-picker>
        </ComGroup>
        <ComGroup title="背景图片">
            <el-button type="text" @click="backgroundImage = ''">重置</el-button>
            <UpLoadBox :imgUrl.sync="backgroundImage"></UpLoadBox>
        </ComGroup>
    </div>
</template>

<script>
import ComTitle from '@/components/BasicUi/ComTitle'
import ComGroup from '@/components/BasicUi/ComGroup'
import UpLoadBox from '@/components/BasicUi/UpLoadBox'
import ComDivider from '@/components/BasicUi/ComDivider'
export default{
    components:{
        ComTitle,
        ComGroup,
        UpLoadBox,
        ComDivider
    },
    data(){
        return {

        }
    },
    computed:{
        name:{
            get: function(){
                return this.$store.state.pageData.name
            },
            set: function(val){
                this.updatePageInfo({ name:val })
            },
        },
        shareDesc:{
            get: function(){
                return this.$store.state.pageData.shareDesc
            },
            set: function(val){
                this.updatePageInfo({ shareDesc:val })
            },
        },
        shareImage:{
            get: function(){
                return this.$store.state.pageData.shareImage
            },
            set: function(val){
                this.updatePageInfo({ shareImage:val })
            },
        },
        backgroundColor:{
            get: function(){
                return this.$store.state.pageData.backgroundColor
            },
            set: function(val){
                this.updatePageInfo({ backgroundColor:val })
            },
        },
        backgroundImage:{
            get: function(){
                return this.$store.state.pageData.backgroundImage
            },
            set: function(val){
                this.updatePageInfo({ backgroundImage:val })
            },
        },
    },
    methods:{
        updatePageInfo(value){
            this.$store.commit('SET_PAGE_CONFIG', value)
        }
    }
}
</script>

<style lang="less" scoped>
</style>